<!--
 * @Author: Wangtao
 * @Date: 2020-11-04 21:32:56
 * @LastEditors: Wangtao
 * @LastEditTime: 2020-11-26 11:19:16
-->
<template>
  <el-dialog :close-on-click-modal="false"
             modal-append-to-body
             lock-scroll
             title="提示"
             width="330px"
             :visible.sync="isShow">
    <p style="font-size:12px;margin: -12px 0 20px 0">您还没有绑定手机号，请输入绑定!</p>
    <el-input size="mini" placeholder="请输入手机号码" v-model.trim="mobile" auto-complete="off"></el-input>

    <div slot="footer">
      <el-button @click="isShow=false" size="mini">取消</el-button>
      <el-button type="primary" size="mini" @click.native.stop="signInByPhone">确定</el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts">
import { isNumber2 } from '@/utils/validate'
import { Component, Vue } from 'vue-property-decorator'
import { organizationConfigModule } from '@/store/modules/config/organizationConfig/index'
@Component({
  name: 'BindPhone'
})
export default class NavIndex extends Vue {
  private isShow: boolean = false // 是否展示号码绑定弹窗
  private mobile: string = ''
  private sessionId: string = '' // 登录请求返回的sessionId
  private $message: any

  private open (sessionId: string) { // 由父级调用，打开弹窗
    this.sessionId = sessionId
    this.isShow = true
  }

  private signInByPhone () {
    if (!isNumber2(this.mobile) || !this.mobile) { // 不是纯数字 || 没有手机号
      this.$message.error('请输入正确的手机号码')
      return false
    }
    const actionData = { url: '/base/action/user/update/mobile', method: 'POST', data: { mobile: this.mobile, _id: this.sessionId } }
    organizationConfigModule.organizationCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.$message({ message: '绑定手机号成功', type: 'success' })
        this.$emit('bindPhoneSuccess')
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
</style>
